<template>
   <div  class="d-flex w-100 h-100">
     <div style="width: 35%;height: 100%;">
      <div
     id="sbjbxx1"
     class="w-100 "
     style="height: 90%; position: relative"
   ></div>  
     </div>
     <div style="width: 65%;height: 100%;">
      <CustomTableVue :field-list="useFields().spongDetectionDevicetypeFiield" :table-data="tableData" height="85%" >
       <template #name="slotProps">
         <fakeLenfend
      style="width:100%;height: 90%;"
       :color="[color[slotProps.row.index]]"
       :text="[slotProps.row.name]"
       :orient="'column'"
       >
    </fakeLenfend>
   
   </template>
</CustomTableVue>

   </div>
   </div>

</template>

<script setup lang='ts'>
import * as echarts from "echarts";
import fakeLenfend from '@/components/project/fakeLegend.vue'
import {useOptions} from '@/hook/useOptions'
import  CustomTableVue from '@/components/common/table/CustomTable.vue';
import { useFields } from "@/hook/useFields";
const    color= useOptions().colors
const tableData = ref([
  
    {
        index:0,
        name:'液位检测仪',
        already:'25',
        onBuild:'13',
    },
    {   index:1,
      name:'雨量检测仪',
        already:'21',
        onBuild:'24',
    },
    {   index:2,
      name:'监控视频',
        already:'52',
        onBuild:'24',
    },
    {   index:3,
      name:'水质检测仪',
        already:'25',
        onBuild:'24',
    },
    {   index:4,
      name:'流量检测仪',
        already:'23',
        onBuild:'16',
    },
    
    
])
var colorLine = useOptions().colors.value.slice(0, 5)
function getRich() {
    let result = {}
    colorLine.forEach((v, i) => {
        result[`hr${i}`] = {
            backgroundColor: colorLine[i],
            borderRadius: 3,
            width: 3,
            height: 3,
            padding: [3, 3, 0, -12]
        }
        result[`a${i}`] = {
            padding: [-11, 6, -20, 6],
            color: colorLine[i],
            backgroundColor: 'transparent',
            fontSize: 12
        }
    })
    return result
}
let data = [{
    'name': '液位检测仪',
    'value': 25
}, {
    'name': '雨量检测仪',
    'value': 20
},{
    'name': '监控视频',
    'value': 20
}, {
    'name': '水质检测仪',
    'value': 18
}, {
    'name': '流量检测仪',
    'value': 15
}].sort((a, b) => {
    return b.value - a.value
})
let option = {
    title: {
      text: '总数量\n112个',
      textStyle: {
         color:'#fff'
      },
      x: "40%",
      y: "46%",
    },
  
    series: [{
        type: 'pie',
        radius: ['30%','45%'],
        center: ['50%', '50%'],
        clockwise: true,
        avoidLabelOverlap: true,
        label: {
            show: true,
            position: 'outside',
            formatter: function(params:any) {
                const name = params.name
                const percent = params.percent + '%'
                const index = params.dataIndex
                return [`{a${index}|${name}：${percent}}`, `{hr${index}|}`].join('\n')
            },
            rich: getRich()
        },
        itemStyle: {
            normal: {
                color: function(params:any) {
                    return {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 1,
                        y2: 1,
                        colorStops: [{
                                offset: 0,
                                color: 'rgba(0,180,255,.05)' // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: colorLine[params.dataIndex] // 100% 处的颜色
                            }
                        ],
                        globalCoord: false // 缺省为 false
                    }
                }
            }
        },
        data,
        // roseType: 'radius'//齿轮状
    },
    {
         name: "阴影圈",
         type: "pie",
         radius: ["0", "20%"],
         center: ["50%", "50%"],
         emphasis: {
            scale: false,
         },
         tooltip: {
            show: false,
         },
         itemStyle: {
            color: "rgba(204,225,255, 0.05)",
         },
         zlevel: 4,
         labelLine: {
            show: false,
         },
         data: [100],
      },]
}
let myChart:any
onMounted(() => {
  myChart = echarts.init(
   document.getElementById("sbjbxx1") as HTMLElement
 );

 myChart.setOption(option);
});
onBeforeUnmount(() => {
  // 销毁 ECharts 实例
  if (myChart) {
    myChart.dispose();
  }
});
</script>
 
<style scoped lang="less">

</style>